import { Component, OnInit } from '@angular/core'
import { FormBuilder, FormGroup, Validators } from '@angular/forms'
import { NzMessageService } from 'ng-zorro-antd'
import { tap, take } from 'rxjs/operators'

import { NewPageAccessor } from '@shared/components/new-page/new-page.interface'
import { I18NService } from '@core'
import { makeAllControlDirty, numScale } from 'app/utils/helpers'
import { DepositDataService } from '../../deposit-data.service'
import { IDepositCollection } from '@shared/interfaces/deposit'
import { Currency } from '@shared/interfaces/common'

@Component({
  selector: 'app-deposit-new-collection',
  templateUrl: './collection-form.component.html',
  styleUrls: ['../../../../../shared/styles/new-page-form.less'],
})
export class DepositCollectionFormComponent implements NewPageAccessor, OnInit {
  constructor(
    private fb: FormBuilder,
    private msg: NzMessageService,
    private i18n: I18NService,
    private dataService: DepositDataService,
  ) {}

  data: any
  payload: IDepositCollection
  errorTips = {}
  collectionData: IDepositCollection
  singlePercentMarks = {
    1: '1%',
    25: '25%',
    50: '50%',
    75: '75%',
    100: '100%',
  }

  form: FormGroup = this.fb.group({})

  ngOnInit() {
    this.dataService.depositData$.value$
      .pipe(
        tap(data => {
          this.collectionData = data

          const currency: Currency = new Currency()
          if (data.depositCurrAll) {
            currency.code = data.depositCurrAll.code
            currency.name = data.depositCurrAll.name
          }
          this.form = this.fb.group({
            depositCurr: [currency, [Validators.required]],
            depositAmt: [data.depositAmt || 0, [Validators.required, Validators.min(0), Validators.max(999999999999)]],
            singlePercent: [
              data.singlePercent ? numScale(data.singlePercent, 2) : 1,
              [Validators.required, Validators.min(1), Validators.max(100)],
            ],
            remark: [data.remark, [Validators.required, Validators.maxLength(50)]],
          })
        }),
        take(1),
      )
      .subscribe()

    this.initErrorTips()
  }

  checkValid(): boolean {
    if (this.form.valid) {
      this.pushDataToStore()
      this.msg.success(this.trans('GENERAL.NOTIFICATION.VALIDATION_SUCCESS'))
      return true
    }

    makeAllControlDirty(this.form)
    return false
  }

  pushDataToStore(): void {
    const data: IDepositCollection = {
      intStoreCode: this.collectionData.intStoreCode,
      depositCurr: this.form.get('depositCurr').value.code,
      depositCurrAll: this.form.get('depositCurr').value,
      depositAmt: this.form.get('depositAmt').value,
      singlePercent: numScale(this.form.get('singlePercent').value, 0),
      remark: this.form.get('remark').value,
    }

    this.payload = data
    this.dataService.setDepositData(Object.assign(this.collectionData, data))
  }

  private trans(key: string, params?: Object): string {
    return this.i18n.fanyi(key, params)
  }

  private initErrorTips() {
    this.errorTips = {
      depositCurr: {
        required: this.trans('VALIDATION.REQUIRED_SELECT', { name: this.trans('GENERAL.INFO.SETTLEMENT_CURRENCY') }),
      },
      depositAmt: {
        required: this.trans('VALIDATION.REQUIRED', { name: this.trans('OPERATION.DEPOSIT.TARGET_AMT') }),
        min: this.trans('VALIDATION.MIN_VALUE', { value: '0' }),
        max: this.trans('VALIDATION.MAX_VALUE', { value: '999999999999' }),
      },
      singlePercent: {
        required: this.trans('VALIDATION.REQUIRED', { name: this.trans('OPERATION.DEPOSIT.DAY_RATE') }),
        min: this.trans('VALIDATION.MIN_VALUE', { value: '1%' }),
        max: this.trans('VALIDATION.MAX_VALUE', { value: '100%' }),
      },
      remark: {
        required: this.trans('VALIDATION.REQUIRED', { name: this.trans('GENERAL.INFO.REMARK') }),
        maxlength: this.trans('VALIDATION.MAX_LENGTH', { length: 50 }),
      },
    }
  }
}
